/**
 * 图片懒加载指令
 * 使用 Intersection Observer API 实现高性能的图片懒加载
 * 
 * 使用方法：
 * <img v-lazy="imageUrl" alt="description" />
 * <div v-lazy:background="imageUrl"></div>
 */

const lazyLoad = {
  mounted(el, binding) {
    const { value, arg } = binding
    
    // 如果没有提供图片地址，直接返回
    if (!value) return
    
    // 创建 Intersection Observer
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 元素进入视口
          loadImage(el, value, arg)
          
          // 停止观察
          observer.unobserve(el)
        }
      })
    }, {
      rootMargin: '50px', // 提前 50px 开始加载
      threshold: 0.01
    })
    
    // 开始观察
    observer.observe(el)
    
    // 保存 observer 实例以便后续清理
    el._lazyLoadObserver = observer
  },
  
  updated(el, binding) {
    const { value, arg } = binding
    
    // 如果图片地址改变，重新加载
    if (value !== binding.oldValue) {
      loadImage(el, value, arg)
    }
  },
  
  unmounted(el) {
    // 清理 observer
    if (el._lazyLoadObserver) {
      el._lazyLoadObserver.disconnect()
      delete el._lazyLoadObserver
    }
  }
}

/**
 * 加载图片
 */
function loadImage(el, src, type) {
  // 添加加载状态类
  el.classList.add('lazy-loading')
  
  if (type === 'background') {
    // 背景图片
    const img = new Image()
    img.onload = () => {
      el.style.backgroundImage = `url(${src})`
      el.classList.remove('lazy-loading')
      el.classList.add('lazy-loaded')
    }
    img.onerror = () => {
      el.classList.remove('lazy-loading')
      el.classList.add('lazy-error')
    }
    img.src = src
  } else {
    // 普通 img 标签
    if (el.tagName === 'IMG') {
      const img = new Image()
      img.onload = () => {
        el.src = src
        el.classList.remove('lazy-loading')
        el.classList.add('lazy-loaded')
      }
      img.onerror = () => {
        el.classList.remove('lazy-loading')
        el.classList.add('lazy-error')
        // 设置默认错误图片
        el.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100"%3E%3Crect fill="%23ddd" width="100" height="100"/%3E%3Ctext fill="%23999" x="50%25" y="50%25" text-anchor="middle" dy=".3em"%3E加载失败%3C/text%3E%3C/svg%3E'
      }
      img.src = src
    }
  }
}

export default lazyLoad

